<template>
  <div class="box sm:col-span-1 2xl:col-span-8 intro-y">
    <div class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400">
      <h2 class="font-medium text-base mr-auto">{{ title }}</h2>
      <ul
          class="nav w-52 nav-pills border border-slate-300 dark:border-darkmode-300 border-dashed rounded-md p-1"
          role="tablist"
      >
        <li class="nav-item flex-1">
          <button
              :class="[{'active': activeIndex === 1}, 'nav-link', 'w-full', 'py-1.5', 'px-2']"
              type="button"
              @click="changeTab(1)"
          >
            申报数据
          </button>
        </li>
        <li class="nav-item flex-1">
          <button
              :class="[{'active': activeIndex === 2}, 'nav-link', 'w-full', 'py-1.5', 'px-2']"
              type="button"
              @click="changeTab(2)"
          >
            申报曲线
          </button>
        </li>
      </ul>
    </div>
    <div class="p-3">
      <wTable :tableData="tableData" v-show="activeIndex === 1" />
      <chart :tableData="mockData" v-show="activeIndex === 2" :activeIndex="activeIndex"/>
    </div>
  </div>
</template>

<script setup>
import wTable from "./wTable.vue"
import chart from "./chart1.vue"
import {onMounted, ref} from 'vue';

// 接收 props 和 emits
defineProps({
  title: String,
  tableData: Array,
});
const mockData = ref([]);
const emit = defineEmits(['tabChange']);
onMounted(() => {
  mockData.value = generateMockData();
})
// mock假数据
const generateMockData = () => {
  const data = [];
  let baseElectricityPrice = 391;

  for (let hour = 0; hour <= 24; hour++) {
    for (let minute = 15; minute < 60; minute += 15) {
      // 跳过无效的 "24:15"
      if (hour === 24 && minute > 0) continue;

      const startDate = `${hour.toString().padStart(2, '0')}:${minute
          .toString()
          .padStart(2, '0')}`;
      const endDate = startDate;

      for (let i = 1; i <= 5; i++) {
        data.push({
          startDate,
          endDate,
          stairs: i.toString(),
          electric: i === 1 ? '52' : '0',
          electricityPrice: Math.floor(Math.random() * (400 - 300 + 1)) + 300,
        });
        baseElectricityPrice++;
        if (baseElectricityPrice > 395) baseElectricityPrice = 391;
      }
    }
  }

  return data;
}
// 状态
const activeIndex = ref(1);

// 切换 tab
const changeTab = (index) => {
  activeIndex.value = index;
  emit('tabChange', index);
};
</script>
